```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vRain - 古籍直排电子书制作工具</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        .hero-bg {
            background: linear-gradient(135deg, rgba(242,236,222,0.9) 0%, rgba(222,208,182,0.9) 100%), url('https://cdn.nlark.com/yuque/0/2025/png/21449790/1754972023094-b738807d-7d96-432b-ade0-19ad0e09dbdf.png') center/cover;
        }
        .scroll-down {
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-10px);}
            60% {transform: translateY(-5px);}
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .highlight-text {
            background: linear-gradient(180deg, rgba(255,255,255,0) 60%, #F0E6D2 40%);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.8;
            margin: 0.15em 0.1em 0 0;
            color: #8B6B4A;
            font-weight: 700;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-bg min-h-screen flex flex-col justify-center items-center text-center px-4 py-20 relative overflow-hidden">
        <div class="max-w-4xl mx-auto">
            <h1 class="text-5xl md:text-6xl font-bold text-brown-800 mb-6">vRain</h1>
            <p class="text-xl md:text-2xl text-brown-700 mb-8 max-w-2xl mx-auto">让古籍之美在数字时代焕发新生</p>
            <p class="text-lg text-brown-600 mb-10 leading-relaxed">一款专为中文古籍爱好者和文化传承者设计的开源工具，通过现代技术重现传统刻本的视觉美感，打造古色古香的直排电子书。</p>
            <a href="https://github.com/shanleiguang/vRain" target="_blank" class="inline-block bg-brown-700 hover:bg-brown-800 text-white font-medium py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
                <i class="fab fa-github mr-2"></i> 前往 GitHub
            </a>
        </div>
        <div class="absolute bottom-10 left-0 right-0 text-center">
            <a href="#features" class="scroll-down text-brown-600 text-2xl"><i class="fas fa-chevron-down"></i></a>
        </div>
    </section>

    <!-- Problem Section -->
    <section id="problem" class="py-20 px-4 max-w-6xl mx-auto">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-brown-800 mb-4">古籍数字化的挑战</h2>
            <div class="w-24 h-1 bg-brown-600 mx-auto"></div>
        </div>
        <div class="grid md:grid-cols-2 gap-10 items-center">
            <div>
                <div class="drop-cap bg-white p-8 rounded-lg shadow-md">
                    <p>古籍阅读和数字化常面临诸多挑战：扫描版古籍文件体积庞大，文字无法选中，难以查阅生僻字词；现代排版工具生成古书风格时，细节处理（如标点旋转、鱼尾页码）复杂且耗时；普通用户缺乏专业排版技能，难以复刻古籍的独特美感。此外，现有工具往往不支持灵活的字体切换或批量处理大文本量。这使得古籍数字化既不方便阅读，也难以推广。</p>
                    <p class="mt-4">vRain 正是为解决这些问题而生。它通过自动化的直排排版流程，简化文本准备和样式配置，支持百万字级文本快速生成古籍风格电子书，让普通用户也能轻松打造专业级古籍电子书。</p>
                </div>
            </div>
            <div class="relative">
                <div class="bg-brown-100 p-8 rounded-lg border-l-4 border-brown-600">
                    <h3 class="text-xl font-bold text-brown-800 mb-4">常见问题</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
                            <span>扫描版古籍无法选中文字，难以查找和引用</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
                            <span>现代排版工具对古籍特殊排版支持有限</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
                            <span>缺乏自动化的批注和目录生成功能</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i>
                            <span>大文本量处理效率低下</span>
                        </li>
                    </ul>
                </div>
                <div class="mt-8 bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                    <h4 class="font-bold text-brown-700 mb-3">你有想以古书形式保存的文本吗？</h4>
                    <p class="text-brown-600">vRain 如何帮助你提升这些内容的呈现效果？</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20 px-4 bg-brown-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-brown-800 mb-4">核心功能</h2>
                <p class="text-brown-600 max-w-2xl mx-auto">专为古籍数字化设计的一系列实用功能，确保排版真实性和易用性</p>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
                    <div class="text-brown-600 text-3xl mb-4">
                        <i class="fas fa-columns"></i>
                    </div>
                    <h3 class="text-xl font-bold text-brown-800 mb-3">直排排版与背景定制</h3>
                    <p class="text-brown-600">生成宣纸或竹简风格的书叶背景图，文字自右向左、从上至下排列，复刻古籍雕版印刷效果。可配置书房名、页面尺寸、行列数和框线样式。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
                    <div class="text-brown-600 text-3xl mb-4">
                        <i class="fas fa-font"></i>
                    </div>
                    <h3 class="text-xl font-bold text-brown-800 mb-3">字体智能补全</h3>
                    <p class="text-brown-600">支持一主多辅字体，若主字体缺少字符，自动切换备用字体或尝试简繁转换，减少乱码问题，提升排版一致性。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
                    <div class="text-brown-600 text-3xl mb-4">
                        <i class="fas fa-quote-right"></i>
                    </div>
                    <h3 class="text-xl font-bold text-brown-800 mb-3">标点与符号优化</h3>
                    <p class="text-brown-600">支持标点归一化（如统一为句号）、旋转书名号和引号、设置标点不占字符位置，贴近古籍紧凑风格。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
                    <div class="text-brown-600 text-3xl mb-4">
                        <i class="fas fa-comment-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold text-brown-800 mb-3">批注与目录支持</h3>
                    <p class="text-brown-600">支持小字双排批注，方便添加注释；自动根据文本序号生成PDF目录，便于章节跳转。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
                    <div class="text-brown-600 text-3xl mb-4">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold text-brown-800 mb-3">高效批量处理</h3>
                    <p class="text-brown-600">百万字书籍可在十几分钟内生成，配置参数可复用，极大提升大文本量处理效率。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
                    <div class="text-brown-600 text-3xl mb-4">
                        <i class="fas fa-book-open"></i>
                    </div>
                    <h3 class="text-xl font-bold text-brown-800 mb-3">古风细节还原</h3>
                    <p class="text-brown-600">从宣纸底纹到书名号侧边线，注重古籍视觉细节，输出效果接近博物馆级古书。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-20 px-4 max-w-6xl mx-auto">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-brown-800 mb-4">使用场景</h2>
            <div class="w-24 h-1 bg-brown-600 mx-auto"></div>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-brown-600">
                <h3 class="text-xl font-bold text-brown-800 mb-3">古籍数字化复刻</h3>
                <p class="text-brown-600 mb-4">古籍研究者可以将《诗经集传》等经典文本转换为直排PDF，添加批注，生成适配电子阅读器的版本。</p>
                <div class="bg-brown-50 p-4 rounded text-sm">
                    <p class="text-brown-700 italic">示例：将扫描版古籍文本化后，用 vRain 排版，保留鱼尾页码和宣纸底纹，方便查阅和分享。</p>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-brown-600">
                <h3 class="text-xl font-bold text-brown-800 mb-3">个人创作古风化</h3>
                <p class="text-brown-600 mb-4">网文作者或日记爱好者可用 vRain 将作品排版为古书风格。</p>
                <div class="bg-brown-50 p-4 rounded text-sm">
                    <p class="text-brown-700 italic">示例：将小说《黑神话悟空》章节配上竹简背景和插图，导出PDF后获得沉浸式阅读体验，适合作为粉丝纪念品。</p>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-brown-600">
                <h3 class="text-xl font-bold text-brown-800 mb-3">文化传承与家谱整理</h3>
                <p class="text-brown-600 mb-4">家族成员可将家谱或家训整理为古籍风格电子书。</p>
                <div class="bg-brown-50 p-4 rounded text-sm">
                    <p class="text-brown-700 italic">示例：将手写族谱数字化后，用 vRain 添加古风排版和印章装饰，打印成线装书作为传家宝。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-20 px-4 bg-brown-800 text-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">优势与特色</h2>
                <p class="text-brown-200 max-w-2xl mx-auto">相较于其他排版工具（如 InDesign 或通用PDF编辑器），vRain 在这些方面独具优势</p>
            </div>
            <div class="grid md:grid-cols-2 gap-10">
                <div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-3 highlight-text inline-block">专注古籍风格</h3>
                        <p class="text-brown-200">专为中文直排设计，内置鱼尾页码、双排批注、标点旋转等古籍特色功能，无需用户手动调整复杂参数。</p>
                    </div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-3 highlight-text inline-block">开源免费</h3>
                        <p class="text-brown-200">基于 MIT 许可，代码完全开源，用户可自由修改和扩展，适合个人和社区开发者。</p>
                    </div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-3 highlight-text inline-block">高效自动化</h3>
                        <p class="text-brown-200">文本编辑与排版分离，配置一次即可复用，批量处理能力远超手动排版工具，适合处理长篇文本。</p>
                    </div>
                </div>
                <div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-3 highlight-text inline-block">细节还原</h3>
                        <p class="text-brown-200">从宣纸底纹到书名号侧边线，vRain 注重古籍视觉细节，输出效果接近博物馆级古书。</p>
                    </div>
                    <div class="bg-brown-700 p-6 rounded-lg">
                        <h4 class="text-lg font-bold mb-3">局限性</h4>
                        <p class="text-brown-200">vRain 使用 Perl 语言开发，依赖 Image::Magick 和 PDF::Builder 模块，安装配置对非技术用户可能有一定门槛。此外，字体版权需用户自行注意，避免使用未授权字体。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-20 px-4 max-w-6xl mx-auto">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-brown-800 mb-4">上手指南</h2>
            <div class="w-24 h-1 bg-brown-600 mx-auto"></div>
        </div>
        
        <div class="grid md:grid-cols-2 gap-10 items-start">
            <div>
                <div class="bg-white p-8 rounded-lg shadow-md">
                    <h3 class="text-xl font-bold text-brown-800 mb-6">安装与配置</h3>
                    <div class="space-y-6">
                        <div>
                            <h4 class="font-bold text-brown-700 mb-2">1. 安装依赖</h4>
                            <ul class="list-disc pl-5 text-brown-600 space-y-2">
                                <li>确保系统安装 Perl（推荐 5.30+）</li>
                                <li>Mac 用户运行 <code class="bg-gray-100 px-1 rounded">brew install perlmagick</code></li>
                                <li>Windows 用户下载 ImageMagick 6.9 版本</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-bold text-brown-700 mb-2">2. 下载 vRain</h4>
                            <p class="text-brown-600">访问 <a href="https://github.com/shanleiguang/vRain" target="_blank" class="text-brown-700 underline">GitHub 仓库</a>，下载 ZIP 或克隆仓库</p>
                        </div>
                        <div>
                            <h4 class="font-bold text-brown-700 mb-2">3. 准备文本与配置</h4>
                            <p class="text-brown-600">在 <code class="bg-gray-100 px-1 rounded">text</code> 目录中放入待排版文本（UTF-8 编码）</p>
                        </div>
                        <div>
                            <h4 class="font-bold text-brown-700 mb-2">4. 运行排版脚本</h4>
                            <p class="text-brown-600">进入 vRain 目录，运行 <code class="bg-gray-100 px-1 rounded">perl vrain.pl</code></p>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="bg-brown-50 p-6 rounded-lg border border-brown-200">
                    <h4 class="font-bold text-brown-800 mb-3">配置示例</h4>
                    <pre class="bg-white p-4 rounded overflow-auto text-sm text-brown-800">
<code>$book_name = "MyBook";
$rows = 20;      # 每页行数
$cols = 10;      # 每行字数
$main_font = "NotoSerifTC"; # 主字体
$bg_style = "paper"; # 背景样式 (paper/bamboo)
$punctuation_rotate = 1; # 标点旋转
$add_pagination = 1; # 添加页码</code>
                    </pre>
                </div>
                <div class="mt-8 bg-white p-6 rounded-lg shadow-sm">
                    <h4 class="font-bold text-brown-700 mb-3">你的电脑环境是否适合运行 Perl 脚本？</h4>
                    <p class="text-brown-600">如果需要帮助配置 vRain，你会选择查阅文档还是寻求社区支持？</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Visualization Section -->
    <section class="py-20 px-4 bg-brown-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-brown-800 mb-4">vRain 工作流程</h2>
                <p class="text-brown-600 max-w-2xl mx-auto">从文本输入到古风电子书生成的全过程可视化</p>
            </div>
            <div class="bg-white p-8 rounded-lg shadow-md">
                <div class="mermaid">
                    graph TD
                    A[输入文本文件] --> B[配置参数: 字体/背景/排版]
                    B --> C{预处理}
                    C -->|字符检查| D[字体补全]
                    C -->|标点处理| E[标点旋转]
                    D --> F[生成页面布局]
                    E --> F
                    F --> G[应用古风样式]
                    G --> H[生成PDF]
                    H --> I[输出电子书]
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```